<template>
	<view>
		<!-- 头部 -->
		<view class="header" v-bind:class="{'status':isH5Plus}">
			<view class="userinfo">
				<view class="face">
					<image :src="userinfo.face"></image>
				</view>
				<view class="info">
					<view class="username">{{userinfo.username}}</view>
					<view class="integral">积分:{{userinfo.integral}}</view>
				</view>
			</view>
			<view class="setting">
				<image src="../../static/HM-PersonalCenter/setting.png"></image>
			</view>
		</view>
		<!-- 图标 -->
		<view class="orders">
			<view class="box">
				<view class="label" v-for="(row,index) in orderTypeLise" :key="row.name" hover-class="hover" @tap="toOrderType(index)">
					<view class="icon">
						<view class="badge" v-if="row.badge>0">{{row.badge}}</view>
						<image :src="'../../static/HM-PersonalCenter/'+row.icon"></image>
					</view>
					{{row.name}}
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="list">
			<view class="li" hover-class="hover">
				<view class="icon">
					<image src="../../static/HM-PersonalCenter/sever/kefu.png"></image>
				</view>
				<view class="text">客服中心</view>
				<image class="to" src="../../static/HM-PersonalCenter/to.png"></image>
			</view>
			<view class="li" hover-class="hover">
				<view class="icon">
					<image src="../../static/HM-PersonalCenter/sever/quan.png"></image>
				</view>
				<view class="text">推广赚钱</view>
				<image class="to" src="../../static/HM-PersonalCenter/to.png"></image>
			</view>
			<view class="li" @tap="bindMyGame" hover-class="hover">
				<view class="icon">
					<image src="../../static/HM-PersonalCenter/sever/renw.png"></image>
				</view>
				<view class="text">最近在玩</view>
				<image class="to" src="../../static/HM-PersonalCenter/to.png"></image>
			</view>
			<view class="li" hover-class="hover">
				<view class="icon">
					<image src="../../static/HM-PersonalCenter/sever/momey.png"></image>
				</view>
				<view class="text">充值中心</view>
				<image class="to" src="../../static/HM-PersonalCenter/to.png"></image>
			</view>

		</view>
		<view class="list">
			<view class="li" hover-class="hover">
				<view class="icon">
					<image src="../../static/HM-PersonalCenter/sever/kefu.png"></image>
				</view>
				<view class="text">退出登录</view>
				<image class="to" src="../../static/HM-PersonalCenter/to.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import service from "@../../service.js"
	export default {
		computed: {
			...mapState(['hasLogin', 'forcedLogin'])
		},
		data() {
			return {
				//#ifdef APP-PLUS
				isH5Plus: true,
				//#endif
				//#ifndef APP-PLUS
				isH5Plus: false,
				//#endif
				userinfo: {},
				orderTypeLise: [
					//name-标题 icon-图标 badge-角标
					{
						name: '游戏',
						icon: 'l1.png',
						badge: 1
					},
					{
						name: '火爆',
						icon: 'l2.png',
						badge: 2
					},
					{
						name: '活动',
						icon: 'l3.png',
						badge: 6
					},
					/* {name:'待评价',icon:'l4.png',badge:9},
					{name:'退换货',icon:'l5.png',badge:0} */
				],
				severList: [
					/* [
						{name:'积分明细',icon:'mingxi.png'},
						{name:'抽奖',icon:'choujiang.png'},
						{name:'收货地址',icon:'addr.png'},
						{name:'银行卡',icon:'bank.png'},
						{name:'安全中心',icon:'security.png'},
						{name:'在线客服',icon:'kefu.png'}
					] */
				],
			};
		},
		onLoad() {
			let user_info = service.getUsers()
			if (user_info.user_token) {
				//加载
				this.init(user_info);
			} else {
				uni.navigateTo({
					url: '../login/login',
				});
			}
		},
		methods: {
			...mapMutations(['logout']),
			init(user_info) {
				//用户信息
				this.userinfo = {
					face: '../../static/HM-PersonalCenter/face.jpeg',
					username: user_info.nickname,
					integral: "1435"
				}
			},
			//用户点击订单类型
			toOrderType(index) {
				uni.showToast({
					title: this.orderTypeLise[index].name
				});
			},
			//退出登录
			bindLogout() {
				this.logout();
				uni.reLaunch({
					url: '../login/login',
				});
			},
			bindMyGame(){
				let userinfo = service.getUsers();
				uni.navigateTo({
					url:'./mygamelist?member_id='+userinfo.member_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.header {
		&.status {
			padding-top: var(--status-bar-height);
		}

		background-color:#ff6364;
		width:92%;
		height:30vw;
		padding:0 4%;
		display:flex;
		align-items:center;

		.userinfo {
			width: 90%;
			display: flex;

			.face {
				flex-shrink: 0;
				width: 15vw;
				height: 15vw;

				image {
					width: 100%;
					height: 100%;
					border-radius: 100%
				}
			}

			.info {
				display: flex;
				flex-flow: wrap;
				padding-left: 30upx;

				.username {
					width: 100%;
					color: #fff;
					font-size: 40upx
				}

				.integral {
					display: flex;
					align-items: center;
					padding: 0 20upx;
					height: 40upx;
					color: #fff;
					background-color: rgba(0, 0, 0, 0.1);
					border-radius: 20upx;
					font-size: 24upx
				}
			}
		}

		.setting {
			flex-shrink: 0;
			width: 6vw;
			height: 6vw;

			image {
				width: 100%;
				height: 100%
			}
		}
	}

	.hover {
		background-color: #eee
	}

	.orders {
		background-color: #ff6364;
		width: 92%;
		height: 11vw;
		padding: 0 4%;
		margin-bottom: calc(11vw + 40upx);
		display: flex;
		align-items: flex-start;
		border-radius: 0 0 100% 100%;
		margin-top: -1upx;

		.box {
			width: 98%;
			padding: 0 1%;
			height: 22vw;
			background-color: #fefefe;
			border-radius: 24upx;
			box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
			margin-bottom: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;

			.label {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-flow: wrap;
				width: 100%;
				height: 16vw;
				color: #666666;
				font-size: 26upx;

				.icon {
					position: relative;
					width: 7vw;
					height: 7vw;
					margin: 0 1vw;

					.badge {
						position: absolute;
						width: 4vw;
						height: 4vw;
						background-color: #ec6d2c;
						top: -1vw;
						right: -1vw;
						border-radius: 100%;
						font-size: 20upx;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 10;
					}

					image {
						width: 7vw;
						height: 7vw;
						z-index: 9;
					}
				}
			}
		}
	}

	.list {
		width: 100%;
		border-bottom: solid 26upx #f1f1f1;

		.li {
			width: 92%;
			height: 100upx;
			padding: 0 4%;
			border-bottom: solid 1upx #e7e7e7;
			display: flex;
			align-items: center;

			&.noborder {
				border-bottom: 0
			}

			.icon {
				flex-shrink: 0;
				width: 50upx;
				height: 50upx;

				image {
					width: 50upx;
					height: 50upx
				}
			}

			.text {
				padding-left: 20upx;
				width: 100%;
				color: #666
			}

			.to {
				flex-shrink: 0;
				width: 40upx;
				height: 40upx
			}
		}
	}
</style>
